<template>
  <div class="newPartner">
    <div class="newPartner_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">添加合作商<i class="el-icon-close"></i></div>
    </div>
    <!-- 商家类型与返回 -->
    <div class="newPartner_type">
      <div>商家列表/<span>商家详情修改</span></div>
      <el-button @click="backList" type="success">返回</el-button>
    </div>

    <!-- 新增商家信息 -->
    <div class="newPartner_info">
      <!-- 头部nav -->
      <div class="newPartner_nav">
        <div
          class="newPartner_navItem"
          :class="{ navItem_active: !navStatus }"
          @click="needInfo"
        >
          基础信息
          <div class="navBorder" v-if="!navStatus"></div>
        </div>

        <div
          class="newPartner_navItem"
          :class="{ navItem_active: navStatus }"
          @click="otherFile"
        >
          附件上传
          <div class="navBorder" v-if="navStatus"></div>
        </div>
      </div>
      <!-- 基础信息 -->
      <div class="newPartner_needInfo" v-if="!navStatus">
        <div class="newPartner_info">
          <div class="newPartner_info_box">
            <form action="#" class="form">
              <div class="form_left">
                <ul>
                  <li>
                    <span>联系人</span><input type="text" v-model="form.link_name" />
                  </li>
                  <!-- <li>
                    <span>邮箱</span><input type="text" v-model="form.mail" />
                  </li> -->
                  <li>
                    <span>店铺名称</span
                    ><input type="text"  maxlength="12" v-model="form.store_name" />
                  </li>
                  <li>
                    <span>单元号</span
                    ><input type="text"  maxlength="12" v-model="form.unit_no" />
                  </li>
                  <li>
                    <span>卖场</span>
                     <el-select style="margin-left:10px;" v-model="form.market_id" placeholder="请选择">
                       <el-option
                         v-for="item in businessList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
                       </el-option>
                     </el-select>
                  </li>
                </ul>
              </div>
              <div class="form_right">
                <ul>
                    <li><span>手机号</span><input type="text" v-model="form.mobile"></li>
                    <li><span>店铺地址</span><input v-model="form.address" type="text" ></li>
                    <li><span>楼层</span>
                      <el-select style="margin-left:10px;" v-model="form.floor" placeholder="请选择">
                        <el-option
                          v-for="item in floorList"
                          :key="item.value"
                          :label="item.name"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </li>
                </ul> 
              </div>
            </form>
          </div>
        </div>
        <!-- 店铺图片-->
        <div class="shopRoom_img">
          <!-- 店铺logo -->
          <div class="shopRoom_logo">
            <span>店铺logo</span>
            <div class="uploadImg" v-if="!store_logo" v-loading="loadingLogo" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
              <input
                type="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="toUploadLogo"
              />
              <div class="fileImg">
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div v-else class="logoShadow">
                <img :src="store_logo" alt="">
                <div class="deleteShadow">
                  <i class="el-icon-delete" @click="deleLogo"></i>
                </div>
            </div>
          </div>
          <!-- 店铺背景 -->
          <div class="shopRoom_bg">
            <span>店铺背景图</span>
            <div class="uploadImg" v-if="!back_img" v-loading="loadingBg" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
              <input
                type="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="toUploadBg"
              />
              <div class="fileImg">
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div v-else class="logoShadow">
                <img :src="back_img" alt="">
                <div class="deleteShadow">
                  <i class="el-icon-delete" @click="deleBackImg"></i>
                </div>
            </div>
          </div>
        </div>

        <!-- 店铺简介 -->
        <div class="shopRoom_brief">
          <span>店铺简介</span>
          <el-input
            type="textarea"
            maxlength="100"
            v-model="form.store_detail"
            rows="5"
            placeholder="店铺简介 "
            class="resizeNone"
          ></el-input>
        </div>
        
        <!-- 到期时间与状态 -->
        <div class="dueDate">
            <!-- <div class="dueDate_time">
                <span>到期时间</span>
                <input type="text" v-model="form.business_end">
            </div> -->
            <!-- <div class="shopRoom_status">
                <span>精选店铺</span>
                <el-radio v-model="form.is_recommend" :label="'1'">精选</el-radio>
                <el-radio v-model="form.is_recommend" :label="'0'">非精选</el-radio>
            </div> -->
        </div>

        <div class="nextBtn">
            <button @click="nextBtn">下一步</button>
        </div>
      </div>

      <!-- 附件上传 -->
      <div class="newPartner_otherFile" v-else>
        <div class="cardImg">
            <span>法人身份证</span>
            <div class="cardImg_positive">
                <div v-if="!id_card_top" class="imgWrap" v-loading="loadingTop" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <input
                    type="file"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="toUploadCardT"
                    />
                    <div class="upTit">
                    <i class="el-icon-plus"></i>
                    身份证正面
                    </div>
                </div>
                <div v-else class="imgWrap">
                    <img :src="id_card_top" alt="">
                    <div class="shadowImg">
                      <i @click="delCardTop" class="el-icon-delete"></i>
                    </div>
                </div>
             </div>
            <div class="cardImg_positive">
                <div v-if="!id_card_back" class="imgWrap" v-loading="loadingBack" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <input
                    type="file"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="toUploadCardB"
                    />
                    <div class="upTit">
                    <i class="el-icon-plus"></i>
                    身份证反面
                    </div>
                </div>
                <div v-else class="imgWrap">
                    <img :src="id_card_back" alt="">
                    <div class="shadowImg">
                      <i @click="delCardBack" class="el-icon-delete"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="license">
          <span>营业执照</span>
          <div class="cardImg_positive">
                <div v-if="!business_img" class="imgWrap" v-loading="loadingLicense" element-loading-text="图片上传中" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <input
                    type="file"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="toUploadL"
                    />
                    <div class="upTit">
                    <i class="el-icon-plus"></i>
                    营业执照
                    </div>
                </div>
                <div v-else class="imgWrap">
                    <img :src="business_img" alt="">
                    <div class="shadowImg">
                      <i @click="delLicense" class="el-icon-delete"></i>
                    </div>
                </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="submitBtn">
          <button @click="stepFn">上一步</button>
          <button @click="toEditShop">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navStatus: false, //点击基础信息或附件上传
      store_logo: "",
      back_img: "",
      id_card_top: "",
      id_card_back: "",
      business_img: "",
      loadingLogo:false,
      loadingBg:false,
      loadingTop:false,
      loadingBack:false,
      loadingLicense:false,
      form: {
        user_id: null,
        store_id: null,
        business_end: "",
        role: "shop",
        name: "", //联系人
        mail: "", //邮箱
        title: "", //店铺名称
        // partner_phone:'',  //手机号
        // partner_address:'',  //店铺地址
        mobile: "",
        store_logo: "",
        id_card_top: "", //身份证正面
        id_card_back: "", //身份证反面
        store_detail: "", //店铺简介
        back_img: "", //背景图
        business_img: "", //营业执照
        is_recommend: null,
        floor:'',
        unit_no:'',
        market_id:''
      },
      businessList:[],
      floorList:[{
        name:'8层',
        value:8
      },{
        name:'7层',
        value:7
      },{
        name:'6层',
        value:6
      },{
        name:'5层',
        value:5
      },{
        name:'4层',
        value:4
      },{
        name:'3层',
        value:3
      },{
        name:'2层',
        value:2
      },{
        name:'1层',
        value:1
      },{
        name:'-1层',
        value:-1
      },{
        name:'-2层',
        value:-2
      }]
    };
  },
  mounted() {
    let user_id = localStorage.getItem("user_id");
    this.form.user_id = Number(user_id);
    this.store_id = this.$route.query.id;
    this.getPartnerDetail();
    this.getBusinessList()
  },

  methods: {
    // 获取卖场列表
    getBusinessList(){
      this.$http.post('/api/root/Market/marketList').then(res=>{
        if(res.code==1){
          this.businessList = res.data?res.data:[]
        }
      })
    },
    //获取店铺详情
    getPartnerDetail() {
      this.$http
        .post("/api/root/StoreShop/detail", { store_id: this.store_id })
        .then(res => {
          // console.log(res);
          if (res.code == 1) {
            this.form = res.data ? res.data : {};
            this.store_logo = res.data.store_logo;
            this.form.store_logo = res.data.store_logo_id;

            this.id_card_top = res.data.id_card_top;
            this.form.id_card_top = res.data.id_card_top_id;

            this.id_card_back = res.data.id_card_back;
            this.form.id_card_back = res.data.id_card_back_id;

            this.back_img = res.data.back_img;
            this.form.back_img = res.data.back_img_id;

            this.business_img = res.data.business_img;
            this.form.business_img = res.data.business_img_id;
          }
        });
    },

    // 上传logo
    toUploadLogo(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingLogo = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            //  console.log(res);
            if (res.code == 1) {
              this.store_logo = res.data.url;
              this.form.store_logo = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingLogo = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLogo = false
          });
    },

    // 上传背景图
    toUploadBg(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingBg = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            //  console.log(res);
            if (res.code == 1) {
              this.back_img = res.data.url;
              this.form.back_img = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingBg = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingBg = false
          });
    },

    // 上传身份证正面
    toUploadCardT(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingTop = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            //  console.log(res);
            if (res.code == 1) {
              this.id_card_top = res.data.url;
              this.form.id_card_top = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingTop = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingTop = false
          });
    },

    // 上传身份证反面
    toUploadCardB(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingBack = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            //  console.log(res);
            if (res.code == 1) {
              this.id_card_back = res.data.url;
              this.form.id_card_back = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingBack = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingBack = false
          });
    },

    //上传营业执照
    toUploadL(event) {
      let file = event.target.files[0];
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.loadingLicense = true
      let form = new FormData();
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then(res => {
            //  console.log(res);
            if (res.code == 1) {
              this.business_img = res.data.url;
              this.form.business_img = res.data.id;
              this.$message({
                type: "success",
                message: "上传成功"
              });
              this.loadingLicense = false
            }
          })
          .catch(err => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
            this.loadingLicense = false
          });
    },

    // 点击logo的删除
    deleLogo() {
      this.form.store_logo = "";
      this.store_logo = "";
    },

    // 点击bg的删除
    deleBackImg() {
      this.form.back_img = "";
      this.back_img = "";
    },

    //点击删除身份证正面
    delCardTop() {
      (this.form.id_card_top = ""), (this.id_card_top = "");
    },
    //点击删除身份证反面
    delCardBack() {
      (this.form.id_card_back = ""), (this.id_card_back = "");
    },
    //点击删除营业执照
    delLicense() {
      (this.form.business_img = ""), (this.business_img = "");
    },

    //点击基础信息
    needInfo() {
      this.navStatus = false;
    },

    // 返回到列表按钮
    backList() {
      this.$router.back(1);
    },

    // 点击下一步
    nextBtn() {
      this.navStatus = true;
    },

    //点击上一步
    stepFn() {
      this.navStatus = false;
    },

    // 点击附件选项
    otherFile() {
      this.navStatus = true;
    },

    // 点击提交按钮
    toEditShop() {
      this.form.cate_lst = JSON.stringify(this.form.cate_lst)
      this.$http
        .post("/api/root/StoreShop/updateStore", this.form)
        .then(res => {
          if (res.code == 1) {
            this.$router.push({ name: "partnerList", query: {} });
            this.$message({
              type: "success",
              message: "修改成功"
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
@import "partnerDetail.less";
</style>
